<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>需求发布页面</title>
    <!-- 引入bootstrap框架的样式文件 -->
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.css" type="text/css">
    <link rel="stylesheet" href="../css/services/serviceRelease.css" type="text/css">
    <link rel="stylesheet" href="../plugins/Hplus-v.4.1.0/css/plugins/sweetalert/sweetalert.css">
    <link rel="stylesheet" href="../plugins/layui/css/layui.css" type="text/css">
    <link rel="stylesheet" href="../css/demand/demandRelease.css" type="text/css">

</head>

<body>


<%@ include file="../common/nav.jsp"%>

<div class="xs-rel-ser">
    <div class="xs-rel-ser-clearfix">
        <div class="rel-content-l">
            <!-- 选择需求分类 - begin -->
            <div class="content-one">
               <h4>
                    1、选择需求分类

                </h4>
                <div class="dropdown" style="margin-left: 30px;">
                    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1"
                            data-toggle="dropdown">APP开发
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                        <li role="presentation">
                            <a role="menuitem" tabindex="-1" href="#">Java</a>
                        </li>
                        <li role="presentation">
                            <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
                        </li>
                        <li role="presentation">
                            <a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
                        </li>
                        <li role="presentation">
                            <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 选择发布服务的分类 - end -->
            <!-- 填写服务标题和联系方式 - begin -->
            <div class="content-two">
                <h4>2、 填写需求描述和联系方式</h4>
                <div class="content-two-clearfix">
                    <!-- 上传封面 - begin -->
                    <div class="content-two-l">
                        <label>
                            <div style="text-align: center">
                                <input class="upload-cover" type="file" height="160px"  width="160px" name="file"
                                       multiple="multiple" accept="image/jpg,image/jpeg,image/png">
                                <span class="upload-tips plus-sign">+</span><br>
                                <span class="upload-tips">服务封面<br>（建议400*400像素）</span>
                            </div>
                        </label>
                    </div>
                    <!-- 上传封面 - end -->
                    <!-- 说明 - 地点 - 联系方式 - begin -->
                    <div class="content-two-r">
                        <div class="content-two-list">
                            <span class="font14"><i>*&nbsp;</i>来个醒目的标题吸引服务者</span>
                            <div class="ser-title">
                                <input type="text" style=" border-radius: 5px;height: 35px;" id="serTitle" name="serTitle"
                                       placeholder="来个醒目的标题吸引服务者" onfocus="this.placeholder=''"
                                       onblur="this.placeholder='来个醒目的标题吸引服务者'">
                            </div>
                        </div>
                        <div class="content-two-list">
                            <span class="font14"><i>*&nbsp;</i>我的地点</span>
                            <div>
                                <form class="form-inline">
                                    <div data-toggle="distpicker">
                                        <div class="form-group">
                                            <label class="sr-only" for="province1">Province</label>
                                            <select class="form-control" id="province1"></select>
                                        </div>
                                        <div class="form-group">
                                            <label class="sr-only" for="city1">City</label>
                                            <select class="form-control" id="city1"></select>
                                        </div>
                                        <div class="form-group">
                                            <label class="sr-only" for="district1">District</label>
                                            <select class="form-control" id="district1"></select>
                                        </div>
                                    </div>
                                </form>

                            </div>
                        </div>
                        <div class="content-two-list">
                            <span class="font14">手机号码</span>
                            <div>
                                <input type="text" style="height: 35px" id="cellPhone" name="cellPhone" value="">
                            </div>
                        </div>
                        <div class="content-two-list">
                            <span class="font14">QQ号码</span>
                            <div>
                                <input type="text" style="height: 35px" id="qqCode" name="qqCode" value="">
                            </div>
                        </div>
                        <div class="bgc-f5">
                            <div class="ser-cost-box">
                                <span class="ser-cost">服务费用：</span>
                                <input type="text" class="price">
                                <span class="price-unit">元</span>
                                <select class="ser-cost-type">
                                    <option value="hour">/小时</option>
                                    <option value="day">/天</option>
                                    <option value="month">/月</option>
                                </select>
                            </div>
                            <div>
                                <span class="time-of-appointment">可约时间：</span>
                                <div class="time-area">
                                    <%--<input type="text" class="layui-input" id="test8" placeholder="请选择月份范围" onfocus="this.placeholder=''" onblur="this.placeholder='请选择月份范围'">--%>
                                    <input type="text" class="layui-input" id="test6" placeholder="请选择天数范围" onfocus="this.placeholder=''" onblur="this.placeholder='请选择天数范围'">
                                    <%--<input type="text" class="layui-input" id="test9" placeholder="请选择小时范围" onfocus="this.placeholder=''" onblur="this.placeholder='请选择小时范围'">--%>
                                </div>
                            </div>
                        </div>

                    </div>
                    <!-- 说明 - 地点 - 联系方式 - end -->
                </div>
            </div>
            <!-- 填写服务标题和联系方式 - end -->
            <!-- 上传自我简介和具体服务内容描述 - begin -->
            <div class="content-three">
                <h4>3、上传自我简介和具体服务内容描述</h4>
                <div class="l-common-box">
                    <div class="ser-introduce">
                        <span class="font14"><i>*</i>服务介绍</span>
                        <div>
                            <label class="upload-pic">
                                <div style="text-align: center;margin-top: 10px; ">
                                    <span class="upload-tips plus-sign">+</span><br>
                                    <span class="upload-tips">上传图片（建议上传小于5M，宽度875px的jpg格式图片）</span>
                                    <input class="upload-cover" type="file" height="100px" ; width="100%"
                                           name="file" multiple="multiple" accept="image/jpg,image/jpeg,image/png">
                                </div>
                            </label>
                        </div>

                        <div style="height: 200px">
                                <textarea type="textarea" class="ser-introduce-tip" id="serDesc" name="serDesc" required
                                          placeholder="请在1000字以内描述清楚您的服务内容
如：服务优势、服务流程、服务更多说明" onfocus="this.placeholder=''"></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 上传自我简介和具体服务内容描述 - end -->
            <!-- 设置收费模式和价格 - begin -->
            <div class="content-four">
                <h4>4、选择增值服务加快需求的完成</h4>
                <div class="content-four-box">
                    <label><input id="Aaa" type="checkbox" class="xi">把您的需求短信推送给更多的符合的服务者！</label>

                    <ul class="btn-numbox">
                        <li><span class="number"> 人数&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></li>
                        <li>
                            <ul class="count">
                                <li><span id="num-jian" class="num-jian">-</span></li>
                                <li><input type="text" class="input-num" id="input-num" value="0" /></li>
                                <li><span id="num-jia" class="num-jia">+</span></li>
                            </ul>
                        </li>

                    </ul>


                </div>
            </div>
            <!-- 设置收费模式和价格 - end -->

        </div>
        <div class="rel-ser-r">
            <div class="ser-note">
                <h4>服务注意事项:</h4>
                <ul>
                    <li>1、根据国家广告法新规，标题请不要使用不实虚假夸大的描述，如：国家级、最好、全网最低、第一、独家等限制级词语。</li>
                    <li>2、服务的封面图片和详情中请不要使用存在侵权的字体和图片，如有侵权行为，平台将下架该服务。</li>
                    <li>3、双方达成协议后，服务商在完成时间后7天内不提交验收，默认放弃服务，托管金额将全额返还给需求者。</li>
                    <li>4、交易全程零佣金，但依法纳税是每个公民的义务，平台将从每笔订单收入中扣除相应的综合服务税费，以帮个体开票给到需求方。</li>
                </ul>
                <!-- 客服 - begin -->
                <div class="division">
                    <span class="customer-ser">发布有疑问？客服来帮忙！</span>
                </div>
                <a href="#" class="qq-a">QQ在线联系</a>
                <span class="ser-timearea">周一至周五9:00~18:00</span>
                <span class="customer-ser-tel">400-180-8321</span>
                <span class="ser-timearea">周一至周日9:00~21:00</span>
                <!-- 客服 - end -->
            </div>

            <!-- 发布 - begin -->
            <div class="release">
                <h4 style="padding-bottom: 25px;">发布</h4>
                <a href="javascript:void(0)" class="ser-btn">
                    <button type="button" class="btn-save save" id="save">保存草稿</button>
                </a>
                <a href="javascript:void(0)" class="ser-btn">
                    <button type="button" class="btn-release commit" id="commit">确认发布</button>
                </a>
            </div>
            <!-- 发布 - end -->
        </div>
    </div>
</div>
<%@ include file="../common/footer.jsp"%>


<!-- bootstrap中的js插件依赖于jquery框架,所以必须先引入jquery的js文件 -->
<script src="../plugins/jquery/jquery.min.js"></script>
<script src="../js/demand/demandRelease.js"></script>
<!--引入bootstrap的js文件-->
<script src="../plugins/bootstrap/js/bootstrap.js"></script>
<script src="../plugins/layui/layui.all.js"></script>

<script src="../plugins/Hplus-v.4.1.0/js/plugins/sweetalert/sweetalert.min.js"></script>

<script src="../plugins/bootstrap-date/js/distpicker.data.js"></script>
<script src="../plugins/bootstrap-date/js/distpicker.js"></script>
<script src="../plugins/bootstrap-date/js/main.js"></script>
</body>

</html>